<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            list-style: none;
        }
    </style>
</head>

<body>
    <ul>
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
        <li>我是第4个li</li>
        <li>我是第5个li</li>
        <li>我是第6个li</li>
        <li>我是第7个li</li>
        <li>我是第8个li</li>
        <li>我是第9个li</li>
        <li>我是第10个li</li>
    </ul>
    <script>
        /**
         * 事件委托/事件代理
         * 只指定一个事件 就可以管理某一类型的事件
         * 将本应该绑定给子元素的事件绑定给父元素 
         * 优点：减少事件绑定，减少浏览器重排和重绘，优化页面性能，给新增元素绑定事件
        */
        var ul = document.querySelector('ul');
        var lis = ul.children;
        // console.log(lis);
        // for(let i=0;i<lis.length;i++){
        //   lis[i].onclick = function(){
        //     lis[i].style.backgroundColor = 'red';
        //     // lis[i].style.height = '100px';
        //   }
        // }

        // 事件委托
        ul.onclick = function () {
            event.target.style.backgroundColor = 'red'
        }
        var newli = document.createElement('li');
        newli.innerHTML = '我是新增li';
        ul.appendChild(newli);
    </script>
</body>

</html>